সিএসএস আউটলাইন

সিএসএস outline প্রোপার্টির মাধ্যমে আউটলাইনের স্টাইল, কালার এবং প্রস্থ সেট করা হয়।

আউটলাইন হলো একটি লাইন যা একটি এলিমেন্টকে আলাদাভাবে উপস্থাপন করার জন্য এলিমেন্টের বর্ডারের বাহিরে আঁকা হয়।

যাইহোক, আউটলাইন প্রোপার্টি বর্ডার হতে ভিন্ন একটি প্রোপার্টি। আউটলাইন একটি এলিমেন্টের মার্জিনের অংশ নয় এবং আউটলাইনের প্রস্থের(width) মাধ্যমে এলিমেন্টের সম্পূর্ন দৈর্ঘ্য এবং প্রস্থের উপরে কোন প্রভাব পড়ে না।

এই এলিমেন্টটিতে একটি লাল সরু বর্ডার এবং 7px চওড়া সবুজ কালারের একটি ডট আউটলাইন সেট করা হয়েছে।

এক নজরে সিএসএস আউটলাইন প্রোপার্টিসমূহ

outline

একটি ডিক্লেয়ারেশনের মাধ্যমে আউটলাইনের সবগুলো প্রোপার্টি সেট করার জন্য একটি শর্টহ্যান্ড প্রোপার্টি।

outline-style

আউটলাইনের স্টাইল সেট করার জন্য ব্যবহার করা হয়।

outline-width

আউটলাইনের প্রস্থ(width) সেট করার জন্য ব্যবহার করা হয়।

outline-color

আউটলাইনের কালার সেট করার জন্য ব্যবহার করা হয়।

outline-offset

একটি এলিমেন্টের আউটলাইন এবং বর্ডারের মাঝখানে স্পেস বা ফাঁকা রাখার জন্য এটি ব্যবহার করা হয়।

আউটলাইন স্টাইল

outline-style প্রোপার্টি দ্বারা আউটলাইনের স্টাইল নির্ধারণ করা হয়।

outline-style প্রোপার্টিতে নিচের ভ্যালুসমূহ ব্যবহার করা যায়ঃ

• solid - একটি সলিড আউটলাইন নির্দেশ করে।
• double - একটি ডাবল আউটলাইন নির্দেশ করে।
• dotted - একটি ডটেড আউটলাইন নির্দেশ করে।
• dashed - একটি ড্যাশ আউটলাইন নির্দেশ করে।
• inset - একটি 3D inset আউটলাইন নির্দেশ করে। outline-color এর ভ্যালুর উপর প্রভাব নির্ভর করে।
• outset - একটি 3D outset আউটলাইন নির্দেশ করে। outline-color এর ভ্যালুর উপর প্রভাব নির্ভর করে।
• groove - একটি 3D groove আউটলাইন নির্দেশ করে। outline-color এর ভ্যালুর উপর প্রভাব নির্ভর করে।
• ridge - একটি 3D ridge আউটলাইন নির্দেশ করে। outline-color এর ভ্যালুর উপর প্রভাব নির্ভর করে।
• hidden - আউটলাইনকে হাইড করার জন্য ব্যবহার করা হয়।
• none - কোন আউটলাইন না প্রদর্শনের জন্য ব্যবহার করা হয়।

এই উদাহরণে, প্রত্যেকটি < p> এলিমেন্টের চারপাশে একটি সরু কালো বর্ডার সেট করে, ভিন্ন ভিন্ন outline-style প্রোপার্টির ভ্যালুসমূহ সেট করে দেখানো হলোঃ

kt_satt_skill_example_id=525

আউটলাইনের প্রস্থ(width)

আউটলাইনের প্রস্থ সেট করার জন্য outline-width প্রোপার্টিটি ব্যবহার করা হয়।

সিএসএসে প্রস্থ নির্ণয়ের বিভিন্ন একক যেমন- px, pt, cm, em ইত্যাদি ব্যবহার করে আউটলাইনের প্রস্থ সেট করা হয় অথবা পূর্ব নির্দিষ্ট ভ্যালু যেমনঃ- thin, medium এবং thick ইত্যাদি ব্যবহার করেও আউটলাইনের প্রস্থ সেট করা যায়।

kt_satt_skill_example_id=527

আউটলাইন কালার

আউটলাইনের কালার সেট করার জন্য outline-color প্রোপার্টিটি ব্যবহার করা হয়।

নিচের যেকোনো একটি পদ্ধতি ব্যবহার করে কালার সেট করা যায়ঃ

• name - কালারের নাম ব্যবহার করে, যেমন "red"
• Hex - হেক্সাডেসিমাল ভ্যালু ব্যবহার করে, যেমন "#ff0000"
• RGB - RGB ভ্যালু ব্যবহার করে, যেমন “rgb(255,0,0)”

kt_satt_skill_example_id=528

আউটলাইন শর্টকাট প্রোপার্টি

আপনি উপরের উদাহরণ গুলো লক্ষ্য করলে দেখবেন যে, আউটলাইনের কিছু উপ-আউটলাইন প্রোপার্টি রয়েছে এবং এক্ষেত্রে কোডের দৈর্ঘ্যও বেড়ে গিয়েছে।

তাই কোড সংক্ষিপ্ত করার জন্য, একটি আউটলাইন প্রোপার্টির মধ্যে সবগুলো আউটলাইন প্রোপার্টি ব্যবহার করা হয়।

নিচের উপ-আউটলাইন প্রোপার্টিসমূহের শর্টকাট প্রোপার্টি হলো outline

• outline-width
• outline-style(আবশ্যক)
• outline-color

kt_satt_skill_example_id=529